<template>
	<view class="service">
		<view class="main" v-if="pro.merchant">
			<swiper class="white-dot" style="height: 400rpx;" :indicator-dots="true" :autoplay="true" :interval="3000" :duration="1000">
				<swiper-item v-for="(i,k) in imgs" :key="k">
					<view class="swiper-item">
						<image :src="i" style="width: 100%;height: 400rpx;" mode="aspectFill"></image>
					</view>
				</swiper-item>
			</swiper>
			
			<!-- 标题 -->
			<view class="block">
				<view class="title">{{pro.product_name}}</view>
				<view class="tags" v-if="pro.merchant">
					<u-tag class="tag" :text="i" type="warning" size="mini" mode="plain" v-for="i in pro.merchant.tags" :key="i"></u-tag>
				</view>
				<view class="price">{{pro.price<0?'价格商议':('￥'+pro.price + (pro.unit?'/'+pro.unit:'') + (pro.exact?'':' 起'))}}</view>
			</view>
			
			<u-gap height="24"></u-gap>
			<view class="padding-lr-lg padding-tb bg-white" v-if="pro.merchant">
				<view class="margin-tb-xs">
					<text class="text-gray">属性</text>
					<text class="margin-lr text-orange">|</text>
					<text>{{pro.merchant.keywords}}</text>
				</view>
				<view class="margin-tb-xs">
					<text class="text-gray">行业</text>
					<text class="margin-lr text-orange">|</text>
					<text>{{pro.merchant.industry}}</text>
				</view>
				<view class="margin-tb-xs">
					<text class="text-gray">风格</text>
					<text class="margin-lr text-orange">|</text>
					<text>{{pro.merchant.style}}</text>
				</view>
			</view>
			
			<!-- 公司 -->
			<u-gap height="24"></u-gap>
			<company :img="pro.merchant.icon" :name="pro.merchant.merchant_name" :anli="cp.case_count" :guzhu="cp.employer" :chengjiao="cp.deal_amount" :score="pro.score"></company>

			<!-- 客户评价 -->
			<u-gap height="24"></u-gap>
			<khpj :score="pro.score" :score1="pro.score_1" :score2="pro.score_2" :score3="pro.score_3"></khpj>
			
			<!-- 案例欣赏 -->
			<u-gap height="24"></u-gap>
			<view class="block">
				<view class="block-title">案例欣赏</view>
				<u-parse :html="pro.product_detail"></u-parse>
			</view>
			

			<!-- 操作栏 -->
			<view class="btm-bar padding">
				<view class="icons">
					<view class="icon" @click="follow">
						<image v-show="!isFollow" src="../../static/images/sv-1.png" style="width: 40rpx;" mode="widthFix"></image>
						<image v-show="isFollow" src="../../static/images/sv-2.png" style="width: 40rpx;" mode="widthFix"></image>
						<view class="text">收藏</view>
					</view>
					<view class="icon" @click="popup(1)">
						<image src="../../static/images/sv-3.png" style="width: 40rpx;" mode="widthFix"></image>
						<view class="text">电话</view>
					</view>
					<view class="icon" @click="popup(2)">
						<image src="../../static/images/sv-4.png" style="width: 40rpx;" mode="widthFix"></image>
						<view class="text">微信</view>
					</view>
				</view>
				<view class="btn" @click="create">
					立即下单
				</view>
			</view>

			<u-popup v-model="pop" mode="center" border-radius="8">
				<view class="padding text-center" style="width: 500rpx;">
					<view class="margin-top">{{copyData}}</view>
					<view class="text-orange text-lg margin-top" @click="copy">点击复制</view>
				</view>
			</u-popup>
		</view>
	</view>
</template>

<script>
	import khpj from './kehupingjia.vue'
	import company from './company.vue'
	export default {
		components: {
			khpj,
			company
		},
		data() {
			return {
				id: '',
				pro: {},
				imgs: [],
				isFollow: 0,
				pop: false,
				copyData: '',
				cp: ''
			};
		},
		onLoad(opt) {
			this.id = opt.id
			this.getData();
		},
		methods: {
			getData() {
				this.$u.get('/product/detail/' + this.id).then(res => {
					let {
						case_count,
						deal_amount,
						employer,
						product,
						follow
					} = res.data.result
					this.pro = product
					this.imgs = product.imgs
					this.isFollow = follow
					this.cp = {
						case_count,
						deal_amount,
						employer
					}
				})
			},
			create() {
				if (this.pro.agent) {
					this.$goto('/pages/agent/index?id=' + this.id)
				} else {
					this.$u.post('/order/proceeds', {
						product_id: this.id
					}).then(res => {
						let no = res.data.result.trade_no
						this.$goto('/pages/order/create?no='+no)
					})
				}
			},
			follow() {
				this.$u.get('/product/follow?product_id=' + this.id).then(res => {
					this.$msg(res.data.msg)
					this.isFollow = res.data.result.follow
				})
			},
			popup(e) {
				if (e == 1) {
					this.copyData = this.pro.merchant.contact_mobile
				} else if (e == 2) {
					this.copyData = this.pro.merchant.wechat
				}
				this.pop = true
			},
			copy() {
				uni.setClipboardData({
					data: this.copyData,
					success: () => {
						this.$msg('复制成功');
						this.pop = false
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	page {
		padding-bottom: 120rpx;
	}

	image {
		height: 0;
	}

	.line-title {
		position: relative;

		&::before {
			content: '';
			width: 40rpx;
			height: 12rpx;
			background: #EEBC80;
			position: absolute;
			left: 0;
			top: 50%;
			transform: translateY(-50%) translateX(-56rpx);
		}
	}

	.company {
		.info {
			width: 530rpx;
		}
	}

	.btm-bar {
		width: 100%;
		height: 120rpx;
		position: fixed;
		bottom: 0;
		background: #fff;
		border-top: 1px solid rgba(0, 0, 0, 0.2);
		display: flex;
		justify-content: space-between;
		align-items: center;

		.icons {
			display: flex;

			.icon {
				margin: 0 30rpx;
				display: flex;
				flex-direction: column;
				align-items: center;
			}

			.text {
				font-size: 24rpx;
				margin-top: 8rpx;
			}
		}

		.btn {
			width: 260rpx;
			height: 72rpx;
			background: rgba(255, 139, 86, 1);
			border-radius: 4rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: rgba(255, 255, 255, 1);
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
</style>
